<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Switch</title>
  <style type="text/css">
    .switch {
      display: block;
      width: 60px;
      height: 30px;
      margin: 3px;
      position: relative;
    }

    .switch input {
      display: none;
    }

    .switch input+i {
      display: block;
    }

    .switch input+i::before {
      content: ' ';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: #e9e9e9;
      border-radius: 15px;
      transition: all 0.2s;
    }

    .switch input:checked+i::before {
      background-color: #009900;
    }

    .switch input+i::after {
      content: ' ';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
      transition: all 0.2s;
    }

    .switch input:checked+i::after {
      transform: translateX(30px);
    }
  </style>
</head>

<body>
  <fieldset>
    <legend>checkbox switch</legend>
    <label class="switch">
      <input type="checkbox">
      <i></i>
    </label>
    <label class="switch">
      <input type="checkbox">
      <i></i>
    </label>
  </fieldset>
  <fieldset>
    <legend>radio switch</legend>
    <label class="switch">
      <input type="radio" name="radio-test" checked>
      <i></i>
    </label>
    <label class="switch">
      <input type="radio" name="radio-test">
      <i></i>
    </label>
  </fieldset>

</body>

</html>